<template>
  <div>
    <h1>根组件</h1>
    <p>message的值是 {{ message }}</p>
    <p>姓名：{{userinfo.username}}</p>
    <p>年龄：{{userinfo.age}}</p>
    <p style="font-size: 30px;">count 的值为：{{countFromSon}}</p>
    <hr>

    <div class="box">
      <!-- 渲染组件 -->
      <!-- 向子组件传输数据 -->
      <MyText :init="userinfo.age" :user="userinfo.username"></MyText>
      <MyRight @addcount="getcount"></MyRight>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import MyText from "@/components/Count.vue";
import MyRight from "@/components/Right.vue"
export default {
  data(){
    return{
      message: 'hello vue',
      userinfo:{username: '张三',age: 18},
      countFromSon: 0,
    }
  },
  components:{
    MyText,
    MyRight,
  },
  methods:{
    getcount(val){
      this.countFromSon = val
    }
  },
  created() {
    axios({
      method: 'GET',
      url: '127.0.0.1'
    }).then(res => {
      console.log(res)
    }) 
  }
}
</script>

<style lang="less">
*{
  margin: 0;
  padding: 0;
}
.box{
  height: 200px;

}
</style>
